<!--这是修改联系人组件-->
<template>
  <div>
    <p class="filter"></p>
    <div class="addBox" v-loading="formLoading">
      <h3 class="fixTitle">
        <span>{{userInfo.title}}</span>
        <p>
          <em style="cursor: pointer;">
            <svg-icon icon-class="jian" class="font-size16"/>
          </em><em style="cursor: pointer;">
          <svg-icon class="font-size16" icon-class="fullScreen"/>
        </em><em style="cursor: pointer;" @click="close">
          <svg-icon icon-class="cha" class="font-size16"/>
        </em>
        </p>
      </h3>
      <div style="padding: 0 20px;">
        <div style="border-top: 1px solid #eee;padding-top: 10px;position: relative;">
          <el-input @keyup.enter.native="searchUser" v-model="listQuery.content" clearable placeholder="搜索昵称、手机号"
                    style="padding-left: 10px;width: 460px;"></el-input>
          <el-button class="search" style="padding-right:10px;" type="success" icon="el-icon-search" @click="searchUser">搜索</el-button>
          <!-- <span v-if="userInfo.userId">（如想去掉推荐人，不选择直接点击保存）</span> -->
          <div style="max-height:250px;overflow:auto;">
            <el-radio v-for="user in users" :label="user.userId" v-model="radio" :key="user.id" class="userRadio">
              <img class="headImg" :src="user.headimgurl"/>
              <b>{{user.nickname}}&nbsp;&nbsp;&nbsp;&nbsp;（ID：{{user.showUserId}}）</b>
            </el-radio>
          </div>
        </div>
        <p style="position:absolute;bottom: 10px; left: 40%;text-align: center;line-height: 60px;">
          <el-button type="primary" icon="el-icon-check" @click="save">保存</el-button>
          <el-button type="info" @click="close">取消</el-button>
        </p>
      </div>
    </div>
  </div>
</template>
<script>
  import {getUsers} from '@/api/member'
  export default {
    data() {
      return {
        formLoading: false,
        radio: null,
        listQuery: {
          content: null
        },
        users: []
      }
    },
    props: ['userInfo'],
    methods: {
      save() {
        // if (!this.radio) {
        // 	this.$message({
        // 		type: 'info',
        // 		message: '请选择一个用户再点击保存！'
        // 	})
        // 	return
        // }
        this.$emit('commandSave', this.radio)
      },
      searchUser() {
        this.listQuery.userId = this.userInfo.userId
        this.listQuery.vipType = this.userInfo.vipType
        if (!this.listQuery.content) {
          this.$message({
            type: 'info',
            message: '请输入用户的昵称、姓名或手机号！'
          })
          return
        }
        this.formLoading = true
        getUsers(this.listQuery).then(res => {
          this.formLoading = false
          this.users = res.data.data.data
          if (this.users.length == 0) {
            this.$message({
              type: 'warning',
              message: '没有符合条件的会员！'
            })
          }
        }).catch(err => {
          this.formLoading = false
          console.log(err)
        })
      },
      close() {
        this.$emit('hideCommand', false)
      }
    }
  }
</script>
<style scoped>
  p, h3 {
    margin: 0;
  }

  .addBox {
    width: 598px;
    height: 448px;
    background: #fff;
    position: fixed;
    left: 25%;
    /* right: 25%; */
    /* bottom: 15%; */
    top: 15%;
    z-index: 120;
  }

  .fixTitle {
    height: 38px;
    position: relative;
    width: 100%;
  }

  .userRadio {
    text-align: left;
    width: 100%;
    margin: 10px 0;
  }

  .headImg {
    width: 30px;
    height: 30px;
    vertical-align: middle;
    border-radius: 100%;
  }
</style>
